<template>
<!--  -->
<!-- 此页面为自定义组件：修改密码弹窗 -->
<!--  -->
<div>
    <Dialog
          :show="dialogConfig.show"
          :title="dialogConfig.title"
          :buttons="dialogConfig.buttons"
          :showCancel="false"
          width="400px"
          @close="dialogConfig.show = false"
        >
          <!-- @submit.prevent: 用于阻止表单的默认提交行为 -->
          <el-form ref="formDataRef" :rules="rules" :model="formData" label-width="80px" @submit.prevent>
              
              <!-- 输入新密码 -->
              <el-form-item label="新密码" prop="password">
                  <el-input type="password" size="large" placeholder="请输入新密码" v-model.trim="formData.password" show-password>
                    <!-- 输入框里的图标 -->
                        <template #prefix>
                        <span class="iconfont icon-password"></span>
                        </template>
                  </el-input>
              </el-form-item>

              <!-- 确认新密码 -->
              <el-form-item label="确认新密码" prop="rePassword">
                  <el-input type="password" size="large" placeholder="请再次输入新密码" v-model.trim="formData.rePassword" show-password>
                    <!-- 输入框里的图标 -->
                        <template #prefix>
                        <span class="iconfont icon-rePassword"></span>
                        </template>
                  </el-input>
              </el-form-item>

          </el-form>
    </Dialog>
</div>
  
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
const { proxy } = getCurrentInstance();

const formData = ref({});
const formDataRef = ref();

const api = {
    updatePassword: "/updatePassword",   //修改密码的请求地址
}

//判断前后两次输入的密码是否相同
const checkRePassword = (rule, value, callback) => {
    if (value !== formData.value.password) {
        callback(new Error(rule.message));
    } else {
        callback();
    }
};
//根据form表单中的prop属性进行选择校验（proxy.Verify已在main.js中声明）
const rules = {
    password: [
        { required: true, message: "请输入新密码" },
        { validator: proxy.Verify.password, message:"密码须为8~18位，由数字、字母和特殊字符组成" },
    ],
    rePassword: [
        { required: true, message: "请再次输入新密码" },
        { validator: checkRePassword, message:"两次输入的密码不一致" },
    ],
};

// 弹窗定义
const dialogConfig = ref({
    show: false,   //false为关闭弹窗
    title: "修改密码",
    buttons: [
        {
          type: "primary",
          text: "确定",
          click: (e) => {
            submitForm();
          },
        },
    ],
});

//打开弹窗  由父组件Framework.vue的方法调用
const show = () => {
    dialogConfig.value.show = true;
    //重置表单数据
    nextTick(() => {
        formDataRef.value.resetFields();   //对整个表单进行重置，并移除校验结果
        formData.value = {};
    });
};
defineExpose({ show });    //是Vue3中的一个新特性,它允许组件将其内部的数据和方法暴露给父组件

//弹窗确定按钮
const submitForm = async () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        console.log("UpdatePassword.vue -- " + formData.value.password);
        let result = await proxy.Request({
            url: api.updatePassword,
            params: {
                password: formData.value.password
            },
        });
        if (!result) {
            return;
        }
        dialogConfig.value.show = false;  //关闭弹窗
        proxy.Message.success("密码修改成功");
    });
};

</script>

<style lang="scss" scoped>

</style>